<template>
  <view class="payment-list-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="header-title">报名记录列表</text>
      <text class="header-count">共 {{ count }} 条记录</text>
    </view>

    <!-- 列表空状态 -->
    <view class="empty-container" v-if="dataList.length === 0">
      <image
        src="/static/icons/empty-pay.png"
        class="empty-icon"
        mode="widthFix"
      ></image>
      <text class="empty-text">暂无报名记录</text>
    </view>
    <scroll-view
      v-else
      class="function-scroll"
      scroll-y
      @scrolltolower="buttonScrolltolower"
      show-scrollbar="false"
      :scroll-with-animation="true"
      :style="{ height: 'calc(100vh - 100rpx)' }"
    >
      <view
        class="payment-card"
        v-for="(item, index) in dataList"
        :key="index"
        @click="details(item.id)"
      >
        <!-- 卡片头部：需求ID + 支付状态 -->
        <view class="card-header">
          <view class="header-left">
            <!-- <text class="need-id">需求ID：{{ item.need_id }}</text> -->
            <text class="pay-time">{{ formatTime(item.created_at) }}</text>
          </view>
          <!-- 状态标签：不同状态不同颜色 -->
          <view
            class="status-tag"
            :class="item.status === 2 ? 'status-paid' : 'status-pool'"
          >
            {{ item.status_name }}
          </view>
        </view>

        <!-- 卡片内容：核心信息 -->
        <view class="card-content">
          <view class="content-row">
            <view class="content-label">支付金额</view>
            <view class="content-value">
              <text class="amount-sign">¥</text>
              <text class="amount-number">{{ item.pay_amount }}</text>
            </view>
          </view>
          <view class="content-row">
            <view class="content-label">支付方式</view>
            <view class="content-value">{{
              getPayTypeText(item.pay_type)
            }}</view>
          </view>
          <view class="content-row">
            <view class="content-label">企业名称</view>
            <view class="content-value">
              {{ item.company_name }}
            </view>
          </view>
          <view class="content-row">
            <view class="content-label">企业手机号</view>
            <view class="content-value">
              {{ item.phone }}
            </view>
          </view>
          <!-- 已支付才显示支付时间 -->
          <view class="content-row" v-if="item.status === 2">
            <view class="content-label">支付时间</view>
            <view class="content-value">{{
              formatTime(item.pay_time * 1000)
            }}</view>
          </view>
        </view>

        <!-- 卡片底部：操作按钮（可选） -->
        <!-- <view class="card-footer">
          <button
            class="action-btn"
            size="mini"
            @click="handleViewDetail(item)"
          >
            查看详情
          </button>
        </view> -->
      </view>
    </scroll-view>
    <view
      style="
        position: fixed;
        bottom: 35px;
        transform: translate(-50%, 50%);
        left: 50%;
        width: 90%;
      "
      @click="wanCheng"
    >
      <u-button type="primary" round="30">完成招聘</u-button>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { NeedMatchUser, finish } from "../../../api/news.js";

import {
  showToast,
  showLoading,
  hideLoading,
  showModalNoCancel,
  showModal,
} from "@/utils/toast";
// 状态管理
const state = reactive({
  dataList: [],
  count: 0, // 总记录数
  formData: {
    need_id: "",
    page_no: 1,
    page_size: 10,
    page_count: 1,
  },
});
const { dataList, count, formData } = toRefs(state);

// 页面加载：获取列表数据
onLoad(async (e) => {
  if (e.id) {
    formData.value.need_id = e.id;
    await init();
  }
});

// 加载列表数据
const init = async () => {
  try {
    showLoading("加载中...");
    const res = await NeedMatchUser(formData.value);
    if (res.code === 10000) {
      const { count, page_count, page_no, page_size, list } = res.data;
      dataList.value = [...dataList.value, ...list];
      state.count = count;
      Object.assign(formData.value, { page_count, page_no, page_size });
    } else {
      showToast(res.msg || "加载失败", "error");
    }
  } catch (error) {
    console.error("支付列表加载失败:", error);
    showToast("网络异常", "error");
  } finally {
    hideLoading();
  }
};

// 格式化时间（YYYY-MM-DD HH:MM）
const formatTime = (time) => {
  if (!time || time === 0) return "暂无时间";
  const date = new Date(time);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, "0");
  const day = String(date.getDate()).padStart(2, "0");
  const hour = String(date.getHours()).padStart(2, "0");
  const minute = String(date.getMinutes()).padStart(2, "0");
  return `${year}-${month}-${day} ${hour}:${minute}`;
};

// 获取支付方式文本（根据pay_type判断，这里假设1=微信支付）
const getPayTypeText = (type) => {
  const typeMap = {
    1: "微信支付",
    2: "支付宝支付",
    3: "银行卡支付",
  };
  return typeMap[type] || "其他支付";
};

const wanCheng = async () => {
  await showModal(
    {
      title: "系统提示",
      content: "确定要完成此招聘吗？",
      confirmText: "确认", // 自定义确认按钮文字
      cancelText: "取消", // 自定义取消按钮文字
    },
    async (result) => {
      if (result.error) {
        showToast("操作失败，请重试");
        return;
      }

      if (result.confirm) {
        try {
          const res = await finish(formData.value.need_id);

          if (res.code == 10000) {
            showToast("操作成功");
            uni.navigateBack();
          }
        } catch (error) {}
      } else {
      }
    }
  );
};

const buttonScrolltolower = async () => {
  if (state.count != dataList.value.length) {
    formData.value.page_no++;
    showLoading("加载中");
    await init();
  } else {
    showToast("已经最后一页了~");
  }
};
const details = (e) => {
  uni.setStorage({
    key: "WEB_URL",
    data: `https://www.baidu.com/`,
  });
  uni.navigateTo({
    url: "/pages/webview/webview",
  });
};
</script>

<style lang="scss" scoped>
/* 全局容器 */
.payment-list-container {
  min-height: 100vh;
  background-color: #fafbfc;
  padding: 20rpx 24rpx 120rpx;
  box-sizing: border-box;
}

/* 页面标题 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 36rpx;
}
.header-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}
.header-count {
  font-size: 22rpx;
  color: #999;
}

/* 空状态 */
.empty-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 200rpx;
}
.empty-icon {
  width: 180rpx;
  height: 180rpx;
  margin-bottom: 24rpx;
  opacity: 0.6;
}
.empty-text {
  font-size: 24rpx;
  color: #999;
}

/* 支付卡片 */
.payment-card {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 28rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease;
}
.payment-card:hover {
  transform: translateY(-2rpx);
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1px solid #f5f5f5;
}
.header-left {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.need-id {
  font-size: 24rpx;
  color: #666;
  font-weight: 500;
}
.pay-time {
  font-size: 20rpx;
  color: #999;
}
/* 状态标签 */
.status-tag {
  padding: 6rpx 16rpx;
  border-radius: 16rpx;
  font-size: 22rpx;
  font-weight: 500;
}
.status-paid {
  background-color: #e6f4ff;
  color: #409eff;
}
.status-pool {
  background-color: #f0f9eb;
  color: #67c23a;
}

/* 卡片内容 */
.card-content {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 24rpx;
}
.content-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content-label {
  font-size: 22rpx;
  color: #999;
  width: 140rpx;
}
.content-value {
  font-size: 24rpx;
  color: #333;
  flex: 1;
  text-align: right;
}
/* 金额样式 */
.amount-sign {
  font-size: 24rpx;
  color: #ff4d4f;
  margin-right: 4rpx;
}
.amount-number {
  font-size: 32rpx;
  font-weight: 600;
  color: #ff4d4f;
}

/* 卡片底部 */
.card-footer {
  display: flex;
  justify-content: flex-end;
}
.action-btn {
  background-color: #f5f7fa;
  color: #409eff;
  border-radius: 12rpx;
  font-size: 22rpx;
  padding: 8rpx 20rpx;
  border: none;
}
.action-btn:hover {
  background-color: #e6f4ff;
}

/* 分页控件 */
.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20rpx;
  margin-top: 48rpx;
}
.page-btn {
  background-color: #f5f7fa;
  color: #666;
  border-radius: 12rpx;
  font-size: 22rpx;
  padding: 8rpx 24rpx;
  border: none;
}
.page-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.page-info {
  font-size: 22rpx;
  color: #666;
}
</style>
